<script setup lang="ts">
import { getConsultPayAPI } from '@/apis/consult';
import { showToast, showLoadingToast } from 'vant'
import { ref } from 'vue'
// import { getConsultOrderPayUrl } from '@/services/consult'

const props = defineProps<{
    orderId: string
    actualPayment: number
    onClose?: () => void
    show: boolean
    payCallback: string
}>()
const emit = defineEmits<{
    (e: 'update:show', val: boolean): void
}>()

const paymentMethod = ref<0 | 1>()

// 跳转支付
const onPay = async () => {
    if (paymentMethod.value === undefined) return showToast('请选择支付方式')
    showLoadingToast({ message: '跳转支付', duration: 0 })
    const res = await getConsultPayAPI({
        orderId: props.orderId,
        paymentMethod: paymentMethod.value,
        payCallback: 'consult-patients.itheima.net' + props.payCallback
    })
    window.location.href = res.data.payUrl
}
</script>

<template>
    <!-- 支付方式弹窗 -->
    <van-action-sheet :show="show" @update:show="emit('update:show', $event)" title="选择支付方式" :close-on-popstate="false"
        :before-close="onClose" :closeable="false">
        <div class="pay-type">
            <p class="amount">金额￥{{ actualPayment.toFixed(2) }}</p>
            <van-cell-group>
                <van-cell title="微信支付" @click="paymentMethod = 0">
                    <template #icon><cp-icon name="consult-wechat" /></template>
                    <template #extra><van-checkbox :checked="paymentMethod === 0" /></template>
                </van-cell>
                <van-cell title="支付宝支付" @click="paymentMethod = 1">
                    <template #icon><cp-icon name="consult-alipay" /></template>
                    <template #extra><van-checkbox :checked="paymentMethod === 1" /></template>
                </van-cell>
            </van-cell-group>
            <div class="btn">
                <van-button @click="onPay" type="primary" round block>立即支付</van-button>
            </div>
        </div>
    </van-action-sheet>
</template>

<style lang="scss" scoped>
.pay-type {
    .amount {
        padding: 20px;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
    }

    .btn {
        padding: 15px;
    }

    .van-cell {
        align-items: center;

        .cp-icon {
            margin-right: 10px;
            font-size: 18px;
        }

        .van-checkbox :deep(.van-checkbox__icon) {
            font-size: 16px;
        }
    }
}
</style>